<template>
  <a-spin tip="Loading..." :spinning="spinning">
    <div class="operation-box">
      <a-card title="车辆详情">
        <a-button type="primary" slot="extra" @click="() => {$router.push({name:'data_vehicle_operation',params:{id:$route.params.id}})}">编辑</a-button>
        <a-button style="margin-left: 10px;"   slot="extra" @click="() => { $router.push({name:'data_vehicle_index',params:{pageNo:this.cur_page}}) }">返回</a-button>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>车牌号码：<span>{{detail.name}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>车主姓名：<span>{{detail.username}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>车主手机号：<span>{{detail.phone}}</span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>小区：<span>{{detail.bd_name}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>车位号：<span>{{detail.car_area_name}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>车辆标签：<span></span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>车辆排量：<span>{{detail.horsepower}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>车辆型号：<span>{{detail.car_model}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>车身颜色：<span>{{detail.color}}</span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>车主QQ：<span>{{detail.qq}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>车主微信：<span>{{detail.wechat}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>车主邮箱：<span>{{detail.email}}</span></div>
          </a-col>
        </a-row>
        <a-row class="detail-row-margin-bottom-15">
          <a-col :span="8">
            <div>家庭电话：<span>{{detail.family_tel}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>车辆照片：<span v-if="$common.isEmpty(detail.car_img)">暂无附件</span>
              <a href="javascript:void(0);" @click="lookImg('car_img')" v-else>查看附件</a>
            </div>
          </a-col>
          <a-col :span="8">
            <div>行驶证：<span v-if="$common.isEmpty(detail.car_license)">暂无附件</span>
              <a href="javascript:void(0);" @click="lookImg('car_license')" v-else>查看附件</a>
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="8">
            <div>驾照：<span v-if="$common.isEmpty(detail.user_driver)">暂无附件</span>
              <a href="javascript:void(0);" @click="lookImg('user_driver')" v-else>查看附件</a>
            </div>
          </a-col>
          <a-col :span="8">
            <div>车辆标签：<span>{{detail.label_name}}</span></div>
          </a-col>
          <a-col :span="8">
            <div>备注：<span>{{detail.remarks}}</span></div>
          </a-col>
        </a-row>
      </a-card>
    </div>
    <div class="operation-box">
      <a-card title="收费项目">
        <router-link tag="a" :to="{name:'data_vehicle_bz',params:{id:$route.params.id}}" slot="extra">添加收费标准</router-link>
        <a-table :columns="columns" :dataSource="dataSource">
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="bzOperation($event,record)">
                <!--                <a-menu-item key="1">编辑</a-menu-item>-->
                <a-menu-item key="2">删除</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-table>
      </a-card>
    </div>
    <div class="operation-box">
      <a-card title="相关住户">
        <a-table :columns="userColumns" :dataSource="houseUserList" rowKey="id">
          <template slot="label_name" slot-scope="text,record">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{record.label_name ? record.label_name : '暂无标签'}}</span>
              </template>
              <a href="javascript:void(0);">查看</a>
            </a-tooltip>
          </template>
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="houseOperation($event,record)">
                <a-menu-item key="1">详情</a-menu-item>
                <a-menu-item key="2">解绑</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-table>
      </a-card>
    </div>
    <div class="operation-box" >
      <a-card title="相关车位">
        <a-table :columns="parkingColumns" :dataSource="parkingData" rowKey="id">
          <template slot="label_name" slot-scope="text,record">
            <a-tooltip placement="top">
              <template slot="title">
                <span>{{record.label_name ? record.label_name : '暂无标签'}}</span>
              </template>
              <a href="javascript:void(0);">查看</a>
            </a-tooltip>
          </template>
          <template slot="operation" slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
              <a-menu slot="overlay" @click="parkingOperation($event,record)">
                <a-menu-item key="1">详情</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-table>
      </a-card>
    </div>
    <div class="operation-box">
        <a-card title="相关账单">
          <a-table :columns="priceColumns" :dataSource="priceData" rowKey="id">
            <template slot="label_name" slot-scope="text,record">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{record.label_name ? record.label_name : '暂无标签'}}</span>
                </template>
                <a href="javascript:void(0);">查看</a>
              </a-tooltip>
            </template>
            <template slot="operation" slot-scope="text,record">
              <a-dropdown>
                <a class="ant-dropdown-link" href="javascript:void(0);">操作 <a-icon type="down" /></a>
                <a-menu slot="overlay" @click="houseOperation($event,record)">
                  <a-menu-item key="1">详情</a-menu-item>
                  <a-menu-item key="2">解绑</a-menu-item>
                </a-menu>
              </a-dropdown>
            </template>
          </a-table>
        </a-card>
      </div>
    <a-modal :visible="lookFileImgModal" :footer="null" @cancel="() => { lookFileImgModal = false; }">
      <img style="padding:5%" v-for="(item,index) in imgList" :key="index" :src="baseURL + 'static/uploads/' + item.url" :alt="'车辆信息附件图 - '+item.name" :style="{width:'100%',minHeight:'100px'}">
    </a-modal>
  </a-spin>
</template>

<script>
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import detail from '../household/nonindex/detail'
  export default {
    name: 'data_vehicle_detail',
    data() {
      return {
        token:this.$ls.get(ACCESS_TOKEN), // 用户token
        baseURL:this.axios.defaults.baseURL,
        spinning:false,
        form:this.$form.createForm(this),
        col:{
          labelCol:{xs:{span:24},sm:{span:8}},
          wrapperCol:{xs:{span:24},sm:{span:10}}
        },
        columns:[{ title:'收费项目', dataIndex:'project_name', }, { title: '收费标准', dataIndex:'project_detail_name' }, { title: '开始时间', dataIndex:'start_time' }, { title: '结束时间', dataIndex:'end_time' }, { title: '下次账单生成时间', dataIndex:'' },{ title: '备注', dataIndex:'remarks' }, { title: '操作', dataIndex:'operation', scopedSlots:{customRender:'operation'} }], // 收费标准列
        dataSource:[], // 收费标准列数据
        userColumns:[{title:'姓名',dataIndex:'name'},{title:'小区',dataIndex:'bd_name'},{title:'楼宇',dataIndex:'building_name'},{title:'单元',dataIndex:'unit_name'},{title:'房号',dataIndex:'houses_name'},{title:'手机',dataIndex:'phone'},{title:'数据标签',dataIndex:'label_name',scopedSlots:{customRender:'label_name'}},{title:'操作',dataIndex:'operation',scopedSlots:{customRender:'operation'}}], // 相关住户列
        houseUserList:[], // 相关住户列数据
        parkingColumns:[{ title:'车位号',dataIndex:'name' }, { title: '小区',dataIndex:'bd_name' },{title:'数据标签',dataIndex:'label_name',scopedSlots:{customRender:'label_name'}},{title:'操作',dataIndex:'operation',scopedSlots:{customRender:'operation'}}], // 相关住户列
        parkingData:[], // 相关车位列数据
        id:null, // 车辆id
        cur_page:1,
        detail:{}, // 车辆信息
        lookFileImgModal:false, // 查看图片弹窗
        imgList:[], // 图片数据
        priceColumns: [{ title:'类别',dataIndex:'type' }, { title: '房号/车牌/车位号/住户',dataIndex:'car_name' },{ title: '费用名称',dataIndex:'name' },{ title: '开始时间',dataIndex:'start_time' },{title:'结束时间',dataIndex:'end_time'},{title:'单价',dataIndex:'one_money'},{title:'数量',dataIndex:'num'},{title:'应收金额',dataIndex:'price'}], // 相关账单
        priceData: [],
      }
    },
    async mounted() {
      let { id } = this.$route.params;
      this.id = Number(id);
      if(!isNaN(this.id)){
        this.getInfo(id);
        this.getCarNoPay(id);
      }else this.$router.go(-1);
      if(!isNaN(cur_page)){
        this.cur_page=cur_page;
      }else{
        this.cur_page=1;
      }
    },
    methods:{
      // 获取车辆信息
      getInfo(id) {
        this.spinning = true;
        this.axios({
          method:'post',
          url:'/vehicle/getInfo',
          data:{token:this.token,id}
        }).then(res => {
          this.detail = res.data.data;
          this.houseUserList = res.data.house_user;
          this.parkingData = res.data.car_area;
          this.dataSource = res.data.bz;
        }).catch(err => {
          this.$message.error('服务器发生错误...',2);
        }).finally(() => {
          this.spinning = false;
        });
      },
      // 收费标准操作
      bzOperation({ key },info) {
        const _this = this;
        if(key === '2'){
          _this.$confirm({
            title: `确定要删除\"${info.project_name}\"？`,
            onOk() {
              return new Promise((resolve, reject) => {
                _this.axios({
                  method:'post',
                  url:'/houses/delBz',
                  data:{token:_this.token,id:info.id,houses_id:_this.id,type:3},
                }).then(res => {
                  if(res.code === 0){
                    _this.$message.success(res.msg,2);
                    _this.getInfo(_this.id);
                    resolve();
                  }else reject(res.msg);
                }).catch(err => {
                  _this.$message.error('服务器发生错误...',2);
                })
              }).catch((msg) => _this.$message.error(msg,2));
            },
            onCancel() {},
          });
        }
      },
      // 相关住户操作
      houseOperation({ key },info) {
        const _this = this;
        if(key === '1') this.$router.push({name:'data_household_detail',params:{id:info.id}});
        if(key === '2'){
          _this.$confirm({
            title: `确定要将住户\"${info.name}\"解绑？`,
            onOk() {
              return new Promise((resolve, reject) => {
                _this.axios({
                  method:'post',
                  url:'/vehicle/untiedUser',
                  data:{token:_this.token,house_user_id:info.id,car_id:_this.detail.id},
                }).then(res => {
                  if(res.code === 0){
                    _this.$message.success(res.msg,2);
                    _this.getInfo(_this.id);
                    resolve();
                  }else reject(res.msg);
                }).catch(err => {
                  _this.$message.error('服务器发生错误...',2);
                })
              }).catch((msg) => _this.$message.error(msg,2));
            },
            onCancel() {},
          });
        }
      },
      // 相关车位操作
      parkingOperation({ key },info) {
        this.$router.push({name:'data_parking_detail',params:{id:info.id}});
      },
      // 查看附件
      lookImg(type){
        this.lookFileImgModal = true;
        this.imgList = this.detail[type];
      },
      // 获取房屋未缴费账单
      getCarNoPay(id) {
        this.axios({
          method:'post',
          url:'/vehicle/get_car_detail_nopay',
          data:{token:this.token,id}
        }).then(res => {
          this.priceData = res.data
        }).catch(err => {
          this.$message.error('服务器发生错误...',2);
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .operation-box{
    background: #ffffff;
    margin: 25px 25px 0;
    .detail-row-margin-bottom-15{
      margin-bottom: 15px;
    }
  }
</style>